import React, { useEffect, useState } from 'react';
import'./Adjust.scss'
import { Button ,Table,Drawer,Form,Input ,Select,message } from 'antd';
import * as service from '../../../api/adjust'
import type { ColumnsType } from 'antd/es/table';
interface Props{

}
interface DataType {
    id: number;
    aname: string;
    adepartment: string;
    post: string;
    iphone: string;
    role: string;
    astatus: string;
    Job_No: string;
    Certificate: string;
    time: string;
    atype:string
  }
function Adjust(props:Props) {

    const { Option } = Select;
    let [from] = Form.useForm()
    let [tableData,setTableData] = useState<DataType[]>([])
    let [flag,setFlag] = useState(true)
    let [id,setId] = useState(0)
    //控制抽屉的显示隐藏
    const [open, setOpen] = useState(false);
    //抽屉关闭时出发
    const onClose = () => {
        setOpen(false);
        from.setFieldsValue({aname:'',iphone:'',Job_No:'',Certificate:'',role:'',adepartment:"",post:'',astatus:'',time:''})
    };
    //验证通过是触发
    const onFinish = async(values: any) => {

        if(flag){
            // //发送新增请求
            let res = await service.adjust_add(values)
            message.success({content:'新增成功'})
            table()
            setOpen(false)
        }else{
            // 编辑请求
            let newobj = {id,...values}
            let res = await service.adjust_bianji(newobj)
            message.success({content:'编辑成功'})
            table()
            setOpen(false)
        }

    };
    //验证失败时触发
    const onFinishFailed = (errorInfo: any) => {
        console.log(errorInfo)
    };
    //表格数据结构
    const columns: ColumnsType<DataType> = [
        {
          title: '序号',
          key: 'id',
          render: (_,record,) => <span>{tableData.indexOf(record)+1}</span>,
        },
        {
          title: '姓名',
          key: 'aname',
          render: (_,record,) => <span>{record.aname}</span>,
        },
        {
          title: '部门',
          key: 'adepartment',
          render: (_,record,) => <span>{record.adepartment}</span>,
        },
        {
          title: '岗位',
          key: 'post',
          render: (_,record,) => <span>{record.post}</span>,
        },
        {
          title: '手机号',
          key: 'iphone',
          render: (_,record,) => <span>{record.iphone}</span>,
        },
        {
          title: '工号',
          key: 'Job_No',
          render: (_,record,) => <span>{record.Job_No}</span>,
        },
        {
          title: '证件号',
          key: 'Certificate',
          render: (_,record,) => <span>{record.Certificate}</span>,
        },
        {
          title: '工作性质',
          key: 'role',
          render: (_,record,) => <span>{record.role}</span>,
        },
        {
          title: '类型',
          key: 'atype',
          render: (_,record,) => <span>{(record.atype)}</span>,
        },
        {
          title: '晋升原因',
          key: 'astatus',
          render: (_,record,) => <span>{(record.astatus) == "0" ? '晋升':"转正"}</span>,
        },
        {
          title: '操作',
          key: 'time',
          render: (_,record,) => <div className='bianji'>
            <button style={{color:'blue',border:"1px solid blue",backgroundColor:'#fff',padding:'5px 10px',borderRadius:'10px',cursor: "pointer"}} onClick={()=>{bianji(record)}}>编辑</button>
            &emsp;
            &emsp;
            <button style={{color:'red',border:"1px solid red",backgroundColor:'#fff',padding:'5px 10px',borderRadius:'10px',cursor: "pointer"}} onClick={()=>{shanchu(record.id)}}>删除</button>
          </div>,
        },

    ]

    //表格数据
    let table = async()=>{
        let res = await service.adjust_list()
        setTableData(res.data.data)
    }

    //挂载
    useEffect(()=>{
        table()
    },[])

    //新增按钮
    let newAdd = async()=>{
        setOpen(true)
        setFlag(true)
    }
    //编辑数据
    let bianji=(item:any)=>{
        console.log(item)
        setOpen(true)
        setFlag(false)
        let {id,...newarr} = item
        setId(id)
        from.setFieldsValue(newarr)
    }
    //删除数据
    let shanchu = async(id:number)=>{
        let res = await service.adjust_delete({id})
        table()
        message.success({content:'删除成功'})
    }
    return (
        <div className='adjust'>
            <h2>薪资调整</h2>
            <div className="top">
            <Button type="primary" onClick={()=>{newAdd()}}>
                新增
            </Button>
            <Drawer title="新增数据" placement="right" onClose={onClose} open={open}>
            <Form
                form={from}
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 400 }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                label="姓名"
                name="aname"
                rules={[{ required: true, message: 'Please input your username!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="手机"
                name="iphone"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="工号"
                name="Job_No"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="证件"
                name="Certificate"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item
                label="性质"
                name="role"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Input />
                </Form.Item>


                <Form.Item
                label="部门"
                name="adepartment"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Select defaultValue="请选择部门" style={{width:'200px'}}>
                    <Option value="项目部">项目部</Option>
                    <Option value="销售部">销售部</Option>
                    <Option value="产品部">产品部</Option>
                </Select>
                </Form.Item>

                <Form.Item
                label="岗位"
                name="post"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Select defaultValue="请选择你的岗位" style={{width:'200px'}}>
                    <Option value="项目经理">项目经理</Option>
                    <Option value="销售员">销售员</Option>
                    <Option value="项目员">项目员</Option>
                    <Option value="销售经理">销售经理</Option>
                </Select>
                </Form.Item>

                <Form.Item
                label="状态"
                name="astatus"
                rules={[{ required: true, message: 'Please input your password!' }]}
                >
                <Select defaultValue="工作状态" style={{width:'200px'}}>
                    <Option value="0">正式</Option>
                    <Option value="1">试用</Option>
                </Select>
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
                </Form.Item>
            </Form>
            </Drawer>
            </div>
            <Table columns={columns} dataSource={tableData} rowKey={"id"}/>
        </div>
    );
}

export default Adjust;